<template>
  <view class="food-luck-container">
    <!-- 顶部导航栏 -->
    <view class="status-bar" :style="{
      height: navHeight + 'px',
      'padding-top': statusBarHeight + 'px',
    }">
      <view class="nav-bar">
        <view class="nav-bar-left">
          <image src="/static/arrow-left-fill.png" class="nav-back-icon" @click="goBack" />
        </view>
        <view class="nav-bar-title">当前饭局</view>
        <!-- <view class="nav-bar-right">
          <image src="/static/share_icon.png" class="nav-share-icon" @click="shareContent" />
        </view> -->
      </view>
    </view>
    <view class="status-height-color" :style="{ height: navHeight + 'px', 'padding-top': statusBarHeight + 'px' }">
    </view>

    <!-- 顶部图片区域 -->
    <view class="banner-image">
      <view class="banner-image-title">
        <view class="banner-image-title-text">{{ partyData.name }}
        </view>
        <view class="banner-image-title-text2">{{ partyData.nocode }}</view>
      </view>
    </view>

    <!-- 聚餐详情 -->
    <view class="content-section">
      <view class="section-title">聚餐详情</view>
      <view class="section-content">
        <view class="detail-item">
          <text class="detail-label">聚会人数：</text>
          <text class="detail-value">{{ partyData.usernum }}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">聚会时间：</text>
          <text class="detail-value">{{ partyData.show_party_time }}</text>
        </view>
      </view>
    </view>

    <!-- 当前已加入饭局 -->
    <view class="content-section">
      <view class="section-title">当前已加入饭局</view>
      <view class="participants">
        <!-- <view v-for="item in 10" :key="item" class="participant-item">
          <image  class="participant-avatar" mode="aspectFill"></image>
          <text class="participant-name">张女士点点滴滴</text>
        </view> -->
        <view v-if="
          partyData &&
          partyData.userlist &&
          Array.isArray(partyData.userlist) &&
          partyData.userlist.length > 0
        " v-for="(user, index) in partyData.userlist" :key="index" class="participant-item">
          <image v-if="user && user[0]" :src="user[0]" class="participant-avatar" mode="aspectFill"></image>
          <view v-else class="participant-avatar"></view>
          <text class="participant-name">{{
            user && user[1] ? user[1] : "用户" + (index + 1)
          }}</text>
        </view>
      </view>
    </view>

    <!-- 开运菜单 -->
    <view class="content-section">
      <view class="section-title">开运菜单</view>
      <view class="menu-list">
        <view v-if="
          partyData &&
          partyData.dish &&
          Array.isArray(partyData.dish) &&
          partyData.dish.length > 0
        " v-for="(dish, index) in partyData.dish" :key="index" class="menu-item">
          <text class="menu-name">{{
            dish && dish[0] ? dish[0] : "菜品" + (index + 1)
          }}</text>
          <text class="menu-desc">{{
            dish && dish[1] ? dish[1] : "开运菜品"
          }}</text>
        </view>
      </view>
    </view>

    <!-- 能量增幅 -->
    <view class="content-section">
      <view class="section-title">能量增幅</view>
      <view class="energy-boosts">
        <view v-if="partyData && partyData.luck && partyData.luck.length > 0" 
              v-for="(item, index) in partyData.luck" 
              :key="index" 
              class="energy-item">
          <text class="energy-label">{{ item.name }}</text>
          <text class="energy-value">+{{ item.value }}%</text>
        </view>
      </view>
    </view>

    <view class="share-btn" v-if="btnStatus" @click="shareContent">去邀请</view>

    <!-- 分享弹窗 -->
    <view v-if="showSharePost" class="share-modal-mask" @click="closeShareModal">
      <view class="share-modal" @click.stop>
        <view class="share-modal-header">
          <image src="/static/close-icon.png" class="share-modal-close" @click="closeShareModal" />
          <!-- <view class="share-modal-close" @click="closeShareModal">×</view> -->
        </view>
        <view class="share-modal-content">
          <view class="share-banner">
            <view class="share-banner-title">
              <view class="share-banner-title-text">{{ partyData.name }}</view>
              <view class="share-banner-title-text2">{{ partyData.nocode }}
              </view>
            </view>
          </view>
          <view class="share-details">
            <view class="share-detail-item">
              <text class="share-detail-label">组局人：</text>
              <text class="share-detail-value">{{ partyData.create_user }}</text>
            </view>
            <view class="share-detail-item">
              <text class="share-detail-label">人数：</text>
              <text class="share-detail-value">{{ partyData.usernum }}</text>
            </view>
            <view class="share-detail-item">
              <text class="share-detail-label">菜品偏好：</text>
              <text class="share-detail-value">{{ partyData.dishtype }}</text>
            </view>
            <view class="share-detail-item">
              <text class="share-detail-label">吉时：</text>
              <text class="share-detail-value">{{ partyData.show_party_time }}</text>
            </view>
          </view>
          <view class="share-button" @click="generateAndSharePoster">
            生成邀请卡
          </view>
        </view>
      </view>
    </view>

    <!-- 海报预览弹窗 -->
    <view v-if="showPosterPreview" class="poster-preview-mask" @click="closePosterPreview">
      <view class="poster-preview-container" @click.stop>
        <image src="/static/inv-post.png" mode="widthFix" class="poster-image"></image>
        <view class="poster-content">
          <view class="poster-info-item poster-initiator">
            <text>{{ partyData.create_user }}</text>
          </view>
          <view class="poster-info-item poster-time">
            <text>{{ partyData.show_party_time }}</text>
          </view>
          <view class="poster-info-item poster-combination">
            <text>{{ partyData.nocode }}</text>
          </view>
          <view class="poster-info-item poster-code">
            <image class="gr-code" src="../static/grcode.png" alt=""></image>
          </view>
        </view>

        <view class="poster-actions">
          <view class="poster-share-button" @click="shareImageToWeChat">分享邀请卡</view>
          <view class="poster-save-button" @click="closePosterPreview">取消</view>
        </view>
      </view>
    </view>

    <!-- 隐藏的canvas用于生成海报 -->
    <canvas canvas-id="posterCanvas" id="posterCanvas" style="
        width: 600px;
        height: 1067px;
        position: absolute;
        left: -9999px;
        top: -9999px;
      "></canvas>
  </view>
</template>

<script>
export default {
  data() {
    return {
      navHeight: "", //整体顶部导航栏的高度
      statusBarHeight: "", //状态栏高度
      showSharePost: false, //是否显示海报分享
      showPosterPreview: false, //是否显示海报预览
      posterImagePath: "", //海报图片路径
      partyid: null, // 饭局id
      myDinnerPartyID: null, //我的饭局ID
      partyData: {}, // 饭局详情数据
      btnStatus: "", // 生成邀请卡状态
    };
  },
  onLoad(options) {
    let { statusBarHeight, system } = uni.getSystemInfoSync();
    this.statusBarHeight = statusBarHeight;
    this.navHeight = statusBarHeight + (system.indexOf("iOS") > -1 ? 44 : 48);

    this.myDinnerPartyID = options.id;
    this.partyid = options.id;
    if (this.myDinnerPartyID) {
      this.getPartyDetail(this.myDinnerPartyID);
    }
    if (this.partyid) {
      this.getPartyDetail(this.partyid);
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    // 获取饭局详情
    getPartyDetail(partyId) {
      if (!partyId) {
        uni.showToast({
          title: "饭局ID不能为空",
          icon: "none",
        });
        return;
      }

      // 显示加载提示
      uni.showLoading({
        title: "加载中...",
        mask: false,
      });

      this.$Request.postApi("/bot/api/agentcgetuserparty", { partyid: partyId }).then((res) => {
        uni.hideLoading();
        if (res.status === 1) {
          this.partyData = res.data;
          this.btnStatus = res.data.status;
        } else {
          uni.showToast({
            title: res.message || "获取饭局详情失败",
            icon: "none",
          });
        }
      })
        .catch((err) => {
          uni.hideLoading();
          console.error("获取饭局详情失败:", err);
          uni.showToast({
            title: "网络请求失败",
            icon: "none",
          });
        });
    },
    shareContent() {
      this.showSharePost = true;
    },
    closeShareModal() {
      this.showSharePost = false;
    },
    shareToWeChat() {
      // this.generateAndSharePoster();
    },

    closePosterPreview() {
      this.showPosterPreview = false;
    },
    generateAndSharePoster() {
      this.showPosterPreview = true;
    },
    async shareImageToWeChat() {
      // 分享海报按钮事件
      try {
        const posterPath = await this.drawPosterWithInviteCode();
        // 这里调用原有的系统分享方式
        uni.shareWithSystem({
          type: "image",
          imageUrl: posterPath, // 用canvas生成的新图片
          success: () => {
            uni.showToast({
              title: "分享成功",
              icon: "none",
            });
          },
          fail: () => {
            uni.showToast({
              title: "分享失败",
              icon: "none",
            });
          },
        });
      } catch (e) {
        // 错误已在上面处理
      }
      this.showPosterPreview = false;
    },
    // 使用Canvas绘制海报并生成图片
    async drawPosterWithInviteCode() {
      return new Promise((resolve, reject) => {
        uni.showLoading({
          title: "生成海报中...",
        });

        const canvasWidth = 600;
        const canvasHeight = 1067;
        const ctx = uni.createCanvasContext("posterCanvas", this);

        // 绘制背景图片
        ctx.drawImage("/static/inv-post.png", 0, 0, canvasWidth, canvasHeight);

        // 设置字体样式和颜色
        ctx.setFillStyle("#FFF6B7");
        ctx.setTextAlign("center");

        // 绘制发起人信息 - 调整位置与预览保持一致
        ctx.setFontSize(32);
        const initiator =
          this.partyData && this.partyData.create_user
            ? this.partyData.create_user
            : "张先生(未羊)";
        ctx.fillText(initiator, canvasWidth / 2, 354); // 354rpx转换为px并加上字体高度

        // 绘制时间信息 - 调整位置
        ctx.setFontSize(30);
        const time =
          this.partyData && this.partyData.show_party_time
            ? this.partyData.show_party_time
            : "吉时";
        ctx.fillText(time, canvasWidth / 2, 354 + 32 + 110); // 基于发起人位置 + 间距 + 字体高度

        // 绘制编码 - 调整位置
        ctx.setFontSize(30);
        const nocode = this.partyData.nocode;
        ctx.fillText(nocode, canvasWidth / 2, 354 + 32 + 110 + 30 + 100 + 30); // 基于时间位置 + 间距 + 字体高度

        // 绘制二维码
        const qrCodeSize = 200; // 200rpx转换为px大约是150px
        const qrCodeX = (canvasWidth - qrCodeSize * 0.75) / 2; // 居中位置
        const qrCodeY = 354 + 32 + 110 + 30 + 100 + 30 + 50; // 基于组合信息位置 + 间距

        // 绘制二维码图片
        ctx.drawImage("/static/grcode.png", qrCodeX, qrCodeY, qrCodeSize * 0.75, qrCodeSize * 0.75);

        // 绘制到canvas
        ctx.draw(true, () => {
          // 延迟导出，确保绘制完成
          setTimeout(() => {
            uni.canvasToTempFilePath(
              {
                canvasId: "posterCanvas",
                x: 0,
                y: 0,
                width: canvasWidth,
                height: canvasHeight,
                destWidth: canvasWidth,
                destHeight: canvasHeight,
                success: (res) => {
                  uni.hideLoading();
                  this.posterImagePath = res.tempFilePath;
                  resolve(res.tempFilePath);
                },
                fail: (err) => {
                  uni.hideLoading();
                  console.error("Canvas导出失败:", err);
                  uni.showToast({
                    title: "海报生成失败",
                    icon: "none",
                  });
                  reject(err);
                },
              },
              this
            );
          }, 500);
        });
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #ffffff;
}
</style>

<style lang="scss" scoped>
.food-luck-container {
  padding-bottom: 40rpx;
}

.status-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  color: #fff;
  font-weight: 500;
  font-size: 35rpx;

  .nav-bar {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;

    .nav-bar-left {
      display: flex;
      align-items: center;
      margin-left: 32rpx; // 距离左侧

      .nav-back-icon {
        width: 60rpx;
        height: 60rpx;
      }
    }

    .nav-bar-title {
      flex: 1;
      text-align: center;
      font-size: 35rpx;
      font-weight: 500;
      color: #000000;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

    .nav-bar-right {
      position: absolute;
      right: 32rpx;
      display: flex;
      align-items: center;

      .nav-share-icon {
        width: 31.97rpx;
        height: 31.97rpx;
      }
    }
  }
}

/* 顶部图片区域 */
.banner-image {
  width: 695.82rpx;
  height: 205.33rpx;
  overflow: hidden;
  background: url("/static/sheep-card.png") no-repeat center center;
  background-size: 100% 100%;
  margin: 30rpx auto 0;

  .banner-image-title {
    padding: 22rpx 0 0 22rpx;

    .banner-image-title-text {
      font-weight: 600;
      font-size: 30rpx;
      color: #fff6b7;
    }

    .banner-image-title-text2 {
      font-weight: 400;
      font-size: 22rpx;
      color: #fff6b7;
      margin-top: 5rpx;
    }
  }
}

/* 内容区块样式 */
.content-section {
  margin: 30rpx;
  padding: 24rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #2263ec;
  margin-bottom: 20rpx;
}

.section-content {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.detail-item {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  line-height: 1.5;
}

.detail-label {
  color: #333;
  font-weight: 500;
}

.detail-value {
  color: #666;
  flex: 1;
}

/* 参与者样式 */
.participants {
  display: flex;
  flex-wrap: wrap;
  gap: 30rpx;
}

.participant-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
  // min-width: 80rpx;
  // margin-bottom: 20rpx;
}

.participant-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background-color: #f0f0f0;
}

.participant-name {
  font-size: 24rpx;
  color: #333;
  text-align: center;
  // max-width: 146rpx;
  // overflow: hidden;
  // text-overflow: ellipsis;
  // white-space: nowrap;
}

/* 菜单样式 */
.menu-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.menu-item {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
  padding: 16rpx;
  background-color: #f8f9fa;
  border-radius: 12rpx;
}

.menu-name {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
}

.menu-desc {
  font-size: 24rpx;
  color: #666;
}

/* 能量增幅样式 */
.energy-boosts {
  display: flex;
  gap: 40rpx;
}

.energy-item {
  display: flex;
  align-items: center;
  gap: 12rpx;
  padding: 16rpx 24rpx;
  background-color: #f0f8ff;
  border-radius: 12rpx;
}

.energy-label {
  font-size: 28rpx;
  color: #333;
}

.energy-value {
  font-size: 28rpx;
  font-weight: 600;
  color: #2263ec;
}

/* 分享弹窗样式 */
.share-modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.share-modal {
  width: 688.52rpx;
  height: 711.27rpx;
  background: url("/static/pop.png") no-repeat center center;
  background-size: 100% 100%;
  border-radius: 20rpx;
  position: relative;
  display: flex;
  flex-direction: column;
}

.share-modal-header {
  position: absolute;
  top: 22rpx;
  right: 34rpx;
  z-index: 10;
}

.share-modal-close {
  width: 36.89rpx;
  height: 36.89rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40rpx;
}

.share-modal-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 40rpx;
  padding-top: 80rpx;
}

.share-banner {
  width: 100%;
  height: 205.33rpx;
  background: url("/static/sheep-card.png") no-repeat center center;
  background-size: 100% 100%;
  border-radius: 16rpx;
  margin-bottom: 40rpx;
  position: relative;
}

.share-banner-title {
  padding: 20rpx 0 0 20rpx;

  .share-banner-title-text {
    font-weight: 600;
    font-size: 28rpx;
    color: #fff6b7;
  }

  .share-banner-title-text2 {
    font-weight: 400;
    font-size: 20rpx;
    color: #fff6b7;
    margin-top: 4rpx;
  }
}

.share-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  margin-bottom: 40rpx;
}

.share-detail-item {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  line-height: 1.5;
}

.share-detail-label {
  color: #333;
  font-weight: 500;
  min-width: 120rpx;
}

.share-detail-value {
  color: #666;
  flex: 1;
}

.share-button {
  width: 201.64rpx;
  height: 80rpx;
  background-color: #2263ec;
  color: white;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
  font-weight: 600;
  margin: 0 auto;
}

/* 海报预览样式 */
.poster-preview-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
}

.poster-preview-container {
  width: 90%;
  max-width: 650rpx;
  max-height: 85vh;
  padding: 0;
  background-color: transparent;
  border-radius: 20rpx;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.poster-preview-close {
  position: absolute;
  top: -60rpx;
  right: 0;
  font-size: 50rpx;
  color: #ffffff;
  z-index: 1;
}

.poster-image {
  width: 100%;
  height: auto;
  max-height: 80vh;
  border-radius: 10rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
  position: relative;
}

.poster-content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.poster-info-item {
  text-align: center;
  color: #fff6b7;
  font-weight: 500;
  margin-bottom: 30rpx;
}

.gr-code {
  width: 200rpx;
  height: 200rpx;
}

.poster-initiator {
  font-size: 32rpx;
  margin-top: 354rpx;
}

.poster-time {
  font-size: 30rpx;
  margin-top: 110rpx;
}

.poster-combination {
  font-size: 30rpx;
  margin-top: 100rpx;
}

.poster-actions {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin-top: 40rpx;
}

.poster-share-button,
.poster-save-button {
  padding: 20rpx 60rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  font-weight: 500;
  color: white;
}

.poster-share-button {
  background-color: #2263ec;
}

.poster-save-button {
  background-color: #07c160;
}

.share-btn {
  width: 201.64rpx;
  height: 80rpx;
  background-color: #2263ec;
  color: white;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
  font-weight: 600;
  margin: 0 auto;
}
</style>
